<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
    <title>Document</title>
</head>
<body>
<div class="w-[460px] h-[60px] flex gap-10">
        <div class="w-[125px] h-[30px] bg-white bg-[url('./image/2.png')] " ></div>
       <div class="flex  w-[250px] h-[30px] bg-white rounded-xl gap-5">
        <div class=" w-[25px] h-[25px]  bg-[url('./image/3.png')]" >
       </div>
              <div >搜索城市</div>
       </div>
    </div>
    <div class="w-[438px] h-[329px] flex flex-col  bg-gradient-to-r from-white to-yellow-100">
        <div class="w-[350px] h-[50px] flex items-center gap-5 ">
            <h1 class="text-[18px] text-[#000000]">武汉市</h1>
            <div class="text-[12px] text-[#bbbbf4]">湖北省/中国</div>
            <div class=" w-[150px] h-[20px]  ">
                <p class="current-time  text-[12px] ">2025-09-02 16:00</p>
            </div>
        </div>
         <div class="w-[80px] h-[25px]  rounded-xl bg-yellow-500">
            <div class="flex justify-center items-center text-white text-[15px]">AQI 良</div>
         </div>
         <div class="w-[150px] h-[85px]  flex justify-center items-center ">
            <div class="w-[95px] h-[80px] bg-white bg-[url('./image/4.png')]">
            </div>
            <div class="text-3xl">31°
                <div class="text-xl ">阴</div>
            </div>
             
         </div>
         <div class="flex items-center w-[400px] h-[45px] text-[15px]">今晚晴。明天晴，温度和今天差不多（33°），空气一般。</div>
    <div class="w-[390px] h-[70px]  bg-gray-300 rounded-xl">
        <div class="flex  justify-between text-center">
                <div>
                    <p class="text-gray-500 text-sm">一级</p>
                     <p class="font-semibold text-gray-800">西北风</p>
                </div>
                
                <div>
                    <p class="text-gray-500 text-sm">69%</p>
                    <p class="font-semibold text-gray-800">相对湿度</p>
    </div>
        </div>

   

</body>
</html>